<!-- 
	搜索组件 
	1、背景颜色
	2、框体样式： 圆角、方角
	3、搜索栏样式 outline 描边 fill 填充、边框颜色
	4、文本位置： 居左、居中、预设内容
-->
<template>
	<div class="search" :style="wrapper_style">
		<!-- 搜索组件 -->
		<!-- 搜索区域 -->
		<div class="search-inner" :style="searchStyle" @click="toSearch">
			<u-icon name="search" :style="icon_style" :size="32"></u-icon>
			<div type="text" :value="data.textContent" style="input_style" ref="inputValue" :border="false">
				{{data.textContent}}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'u_search',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						//背景颜色
						previewColor: {
							type: String,
							default: '#ffffff'
						},
						//组件样式 1 圆角 2 方角
						chooseStyle: {
							type: String,
							default: '1'
						},
						//搜索栏样式 outline 描边 fill 填充
						searchStyle: {
							type: String,
							default: 'outline'
						},
						//描边颜色
						outlineColor: {
							type: String,
							default: ''
						},
						//文本位置
						textAlign: {
							type: String,
							default: 'left'
						},
						//文本内容
						textContent: {
							type: String,
							default: '请输入搜索的商品'
						}
					}
				}
			}
		},
		data() {
			return {
				current: 0
			}
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				const {
					previewColor
				} = this.data;
				return `
							width: 100%;
							background-color: ${previewColor};
							background-size: 100% auto;
							bakcground-position: center;
						`;
			},
			/** 样式 */
			searchStyle() {
				const {
					previewColor,
					chooseStyle,
					searchStyle,
					outlineColor,
					textAlign
				} = this.data;
				if (searchStyle == 'outline') {
					return `
								background: ${previewColor};
								width: 92%;height: 65%;
								border-radius: ${chooseStyle === '1' ? 15 : 0}px;
								border: ${searchStyle === 'fill' ? 0 : 1}px solid ${outlineColor};
								display: flex;
								overflow: hidden;
								justify-content: ${textAlign};
								color:${outlineColor};
							`;
				} else if (searchStyle == 'fill') {
					return `
								justify-content: ${textAlign};
								background:#fff;
								border:0;
							`;
				}
			},
			input_style() {
				const {
					previewColor,
					outlineColor,
					searchStyle,
					textAlign
				} = this.data;
				if (searchStyle == 'outline') {
					return `
								justify-content: ${textAlign};
								color:${outlineColor};
								background: ${previewColor};
								border:${outlineColor};
							`;
				} else if (searchStyle == 'fill') {
					return `
								justify-content: ${textAlign};
								color:'#b0b0ba';
								background: '#fff';
								border:0;
							`;
				}
			},
			icon_style() {
				const {
					searchStyle,
					textAlign,
					outlineColor
				} = this.data;
				if (searchStyle == 'outline') {
					return `
								color:${outlineColor}
							`;
				} else if (searchStyle == 'fill') {
					return `
								color:'#b0b0ba'
							`;
				}
			}
		},
		methods: {
			/**
			 * 搜索跳转
			 */
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search',
					animationType: 'fade-in'
				});
				this.$u.vuex('vuex_isSerarchBack', false);
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {
		width: 100%;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 搜索区域 */
	.search-inner {
		position: relative;
		width: 92%;
		height: 65%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 3px;
	}

	.search-inner div {
		display: inline-block;
	}

	.search-inner input {
		width: 373px;
		display: block;
		height: 100%;
		text-indent: 20px;
		border: 0;
		color: #b0b0ba;
		box-sizing: border-box;
		margin-top: -1px;
	}

	.ivu-icon-ios-search {
		font-size: 21px;
		
	}
</style>
